<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

import headerUtil from "./base/common/headerUtil.vue";
import commentTypeUtil from "./base/comment/commentTypeUtil.vue";
import commentTextUtil from "./base/comment/commentTextUtil.vue";
import productCartUtil from "./base/product/productCartUtil.vue";
import reqApis from '../req/reqApis.js';


const currentData = ref<any>({
  headerObj: {
    showType: 2
  },
  productId: router.currentRoute.value.query.productId,
  typeNum: 0,
  commentList: [],
  commentObj: {}
});

const getCommentFn = () => {
  let type = null;
  if(currentData.value.typeNum != 0) {
    type = currentData.value.typeNum;
  }
  let params = {
    productId: currentData.value.productId,
    type: type
  };
  reqApis.getCommentInfoListApi(params).then((res:any) => {
    currentData.value.commentList = res.data;
  })
};

const getCommentTotalFn = () => {
  reqApis.getCommentTotalByProductIdApi({
    productId: currentData.value.productId,
  }).then((res:any) => {
    currentData.value.commentObj = res.data;
    console.log(11, currentData.value.commentObj)
  })
};

const selectTypeFn = (type:any) => {
  currentData.value.typeNum = type;
  currentData.value.commentList = [];
  getCommentFn();
};

getCommentTotalFn();
getCommentFn();

</script>
<template>
  <section class="comment">
    <headerUtil :obj="currentData.headerObj">商品评论</headerUtil>
    <div class="content">
      <commentTypeUtil @myClick="selectTypeFn" :commentObj="currentData.commentObj" :iNow="currentData.typeNum"></commentTypeUtil>
      <commentTextUtil v-for="(item, index) in currentData.commentList" :comment="item" :key="index"></commentTextUtil>
    </div>
  </section>
</template>

<style lang="less" scoped>
.comment {
  width: 3.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: white;
  }
}
</style>
